﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OrdersWeb.aspx.cs" Inherits="GoShopping.OrdersWeb" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/css/Shopping%20cart.css" rel="stylesheet" />
    <script src="Content/js/vue.js"></script>
    <script src="Content/js/jquery-1.10.2.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px
        }

        body {
            background-color: #F5F5F5
        }

        .home {
            width: 1000px;
            margin: auto auto;
            background-color: #FFFFFF;
            border: 1px solid #00CBFD;
            margin-bottom:20px
        }

        .beijing {
            background-color: rgba(0,203,253,0.1);
            padding: 25px 30px;
        }

        .xinxi {
            display: flex;
            flex-direction: row;
            overflow: hidden;
            font-weight: 400;
            color: #757575;
            height: 50px;
            align-content: center;
        }

        h3 {
            color: #00CBFD;
            margin-bottom: 5px;
        }

        text {
            font-size: 28px;
            color: black;
            text-align: right
        }

        .xinxi2 {
            display: flex;
            flex-direction: row;
            padding: 25px 30px;
        }

        .img {
            width: 80px;
            height: 80px;
            overflow: hidden
        }

        .xinxi2 .img img {
            width: 100%;
            height: 100%
        }

        .desc {
            width: 400px;
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #333;
            margin-left:10px;
        }

        .anniu {
            display: flex;
            flex-direction: column;
            justify-content: space-around
        }

        .aa {
            color: #757575;
            display: block;
            width: 118px;
            height: 28px;
            font-size: 12px;
            line-height: 28px;
            border: 1px solid #757575;
            text-align: center;
            text-decoration: none;
        }

            .aa:hover {
                background-color: #00CBFD;
                border: none;
                color: white
            }

        .flex {
            flex: 1
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <div class="header">
            <div class="header-logo">
                <img src="images/Logo.png" />
            </div>
            <div class="header-title">
                <h2>我的订单</h2>
                <p>温馨提示：商品预计三天内发货，请随时留意哦~</p>
            </div>
            <div class="flex"></div>
            <div class="topbar-info">
                <a href="UserInfo.aspx">返回>></a>
            </div>
        </div>
       
        <div style="background-color: white; padding: 100px; width: 1000px; margin: auto auto; margin-top: 50px" v-if="this.orders.length>0">
            <div class="home" v-for="(item,index) in orders">
                <div class="beijing">
                    <h3 v-if="item.State==0">已发货</h3>
                    <h3 v-else>待发货</h3>
                    <div class="xinxi">
                        <div class="date" style="line-height: 50px">时间：{{item.OrderTime}}&nbsp; |&nbsp;收件人： {{item.AddressName}} &nbsp; |&nbsp; 收件人号码：{{item.AddressPhone}}&nbsp; |&nbsp; 订单号:{{item.OrderID}}&nbsp; |&nbsp;</div>
                        <div class="flex"></div>
                        <div>实付款：{{item.OrderMoney}}元</div>
                    </div>
                    <div style="font-weight: 400;color: #757575;">收货地址：{{item.Address}}</div>
                </div>
                <div class="xinxi2">
                    <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`" class="img">
                        <img :src="item.GoodsPic" />
                    </a>
                    <div class="desc">
                        {{item.GoodsName}}×{{item.Num}}
                    </div>
                    <div class="flex"></div>
                    <div class="anniu">
                        <div class="aa" v-if="item.Comments==1" @click="pinglun(item.GoodsID,item.OrderID,index)">点击评论</div>
                        <div  class="aa" @click="del(item.OrderID)">取消订单</div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <el-empty description="还没有购买任何商品哦"></el-empty>
        </div>
        <el-dialog
         title="评论"
         :visible.sync="dialogVisible"
         width="30%">
         满意度：<el-rate  v-model="value2" :colors="colors"> </el-rate>
         <el-input type="textarea" rows="4" placeholder="请输入评论" v-model="txtConments"></el-input>
         <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="tijiao">确 定</el-button>
         </span>
         </el-dialog>
    </form>
</body>
</html>
<script type="module">
    import { sendAjaxCar1 } from './Content/js/FactoryCar.js'
    new Vue({
        el: "#form1",
        data: {
            data1: {},
            obj: {},
            orders: [],
            UserPhone: null,
            UserName: null,
            //弹出框显示状态
            dialogVisible: false,
            //评论内容
            txtConments: "",
            value2: 0,
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            data2: {},
            data3: {},
            GoodsID: null,
            OrderID: null,
            index: null
        },
        async created() {
            this.UserPhone = sessionStorage.getItem("UserPhone")
            this.UserName = sessionStorage.getItem("UserName")
            //获取客户订单信息
            if (sessionStorage.getItem("UserID") != null) {
                var that = this
                that.data1.t = "2"
                that.data1.UserID = sessionStorage.getItem("UserID")
                that.obj.type = "POST"
                that.obj.url = "tools/Orderds.ashx"
                await sendAjaxCar1(that.obj, that.data1).then(res => {
                    that.orders = res.res
                })
            }
        },
        methods: {
            //提交评论
            async tijiao() {
                var that = this
                if (this.txtConments == "") {
                    this.$message({
                        message: '请填写评论内容哦~',
                        type: 'warning'
                    });
                } else {
                    that.data2.t = "0"
                    that.data2.UserID = sessionStorage.getItem("UserID")
                    that.data2.GoodsID = that.GoodsID
                    that.data2.Content = that.txtConments
                    that.data2.Manyi = that.value2
                    that.obj.type = "POST"
                    that.obj.url = "tools/Reviewds.ashx"
                    //异步执行评论
                    await sendAjaxCar1(that.obj, that.data2).then(res => {
                        if (res.status = "评论成功！") {

                            this.dialogVisible = false
                            this.$message({
                                message: '评论成功~~',
                                type: 'success'
                            });
                        }
                        else {
                            return;
                        }
                    })
                    that.data3.t = "4"
                    that.data3.OrderID = that.OrderID
                    that.obj.type = "POST"
                    that.obj.url = "tools/Orderds.ashx"
                    await sendAjaxCar1(that.obj, that.data3).then(res => {
                        //无感操作，改变评论状态
                        if (res.status == "修改状态成功！") {
                            that.orders[that.index].Comments=0
                        }
                    })
                    
                }
            },
            //评论窗口
            pinglun(GoodsID, OrderID,index) {
                this.GoodsID = GoodsID
                this.OrderID = OrderID
                this.index=index
                this.dialogVisible = true
           
                
            },
            //删除订单
            del(OrderID) {
                this.$confirm('确定取消订单吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.del1(OrderID)
                }).catch(() => {
                    //this.$message({
                    //    type: 'info',
                    //    message: '已删除'
                    //});
                });
            },
            async del1(OrderID) {
                var that = this
                that.data1.t = "3"
                that.data1.OrderID = OrderID
                that.obj.url = "tools/Orderds.ashx"
                that.obj.type = "GET"
                await sendAjaxCar1(that.obj, that.data1).then(res => {
                    if (res.status == "删除成功！") {
                        //无感操作
                        that.orders = that.orders.filter(item => {
                            return item.OrderID != OrderID
                        })
                        this.$message({
                            message: '取消订单成功，欢饮下次光临~',
                            type: 'success'
                        });
                    }
                })
            }
        }
    })
</script>
